<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>secret key edit</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="/static/super_cmdb/css/font.css">
<link rel="stylesheet" href="/static/super_cmdb/css/xadmin.css">
<link href="/static/super_cmdb/myjson/zui.min.css" rel="stylesheet">
<link href="/static/super_cmdb/myjson/base.css" rel="stylesheet">
<link href="/static/super_cmdb/myjson/new-style.css" rel="stylesheet">
<link href="/static/super_cmdb/myjson/new-style2.css" rel="stylesheet">
<link href="/static/super_cmdb/myjson/header.css" rel="stylesheet">
<link href="/static/super_cmdb/myjson/jquery.numberedtextarea.css" rel="stylesheet">
<script src="/static/super_cmdb/myjson/jquery.min.js"></script>
<script src="/static/super_cmdb/myjson/zui.min.js"></script>
<script src="/static/super_cmdb/myjson/jquery.cookie.js"></script>
<script src="/static/super_cmdb/myjson/qrcode.min.js"></script>
<script src="/static/super_cmdb/myjson/jquery.message.js"></script><div style="clear:both;"></div><div id="jquery-beauty-msg"></div>
<script src="/static/super_cmdb/myjson/bignumber.min.js"></script>
<script src="/static/super_cmdb/myjson/jquery.json.js"></script>
<script src="/static/super_cmdb/myjson/jquery.xml2json.js"></script>
<script src="/static/super_cmdb/myjson/jquery.json2xml.js"></script>
<script src="/static/super_cmdb/myjson/json2.js"></script>
<script src="/static/super_cmdb/myjson/jsonlint.js"></script>
<script src="/static/super_cmdb/myjson/clipboard.min.js"></script>
<script src="/static/super_cmdb/myjson/FileSaver.min.js"></script>
<script src="/static/super_cmdb/myjson/jquery.numberedtextarea.js"></script>
<script src="/static/super_cmdb/myjson/drag.js"></script>
</head>
<body>

<form id="conf_setting_edit" method="post" action="/configcenter/conf_setting_edit-{{ conf_setting_info.id }}/">
    {% csrf_token %}
    <div style="width: 100%;height: 800px">
        <main class="row-fluid editor-con" style="font-family: menlo, monospace, Tahoma, 微软雅黑, 幼圆 !important; position: relative;">
            <div class="col-md-5 col-xs-5" style="padding: 0px; height: 100%; position: relative; z-index: 10;">
                <div class="numberedtextarea-wrapper ">
                    <textarea id="json-src" name="setting_content" placeholder="在此输入json字符串或XML字符串..." class="form-control common-font-size" style="height:100%;padding:10px 10px 10px 30px;border:0;border-radius:0;resize: none;outline:none;border: 1px solid #eee;font-weight: bold;color: royalblue;font-family: none;">{{ conf_setting_info.setting_content }}</textarea>
                    <div class="numberedtextarea-line-numbers" style="padding-top: 10px; line-height: 23.9333px; font-family: menlo, monospace, Tahoma, 微软雅黑, 幼圆; width: 30px;">
                        <div class="numberedtextarea-number numberedtextarea-number-1" style="margin-bottom: 10px;">1</div>
                    </div>
                </div>
            </div>
            <div class="col-md-7 col-xs-7" style="padding: 0px; position: relative; height: 100%;">
                <div id="right-box" class="common-font-size bg-color-ff" style="width:100%;height: 100%;border:solid 1px #eee;border-radius:0;resize: none;overflow-y:scroll; outline:none;position:relative;padding-top:0px;">
                    <p class="editor-tip" style="font-weight: bold;color: red;margin-top: -50px;">可点击key和value值进行编辑</p>
                    <div class="ro" id="json-target" style="padding:0px 32px;white-space: pre-line;word-wrap:break-word;"></div>
                </div>
            </div>
            <br style="clear:both;">
        </main>
        <xblock>
            <h4 style="font-weight: bold">上面配置game_server_id快速修改  <span style="color: red;font-weight: bold">在连接的服务id后直接追加即可</span></h4>
        </xblock>
        {% if conf_setting_info.purpose == 2 %}
            <xblock>
            {% for type,type_content in setting_content.items %}
                <xblock>
                    <h5 style="color: green;">跨服类型: {{ type }}</h5>
                </xblock>
                <table class="layui-table" id='table1'>
                    <thead>
                      <tr>
                        <th>server_id</th>
                        <th>配置名称</th>
                        <th>连接服务数量</th>
                        <th>连接的服务id<span style="color: red;">【要修改game_server_id，必须在这里修改】</span></th>
                      </tr>
                    </thead>
                    <tbody>
                        {% for server_id,server_content in type_content.items %}
                            <tr>
                                <td>
                                    <input style="border: 0px;width: 60px;" id="server_id_list" name="server_id_list" readonly="true" value="{{ server_id }}"/>
                                </td>
                                <td>{{ server_content.remarks }}</td>
                                <td>{{ server_content.game_server_id|length }}</td>
                                <td>
                                    <input id="game_server_id_list" name="game_server_id_list" style="width: 1000px;height: 30px;font-weight: bold;border: 0px;" value="{{ server_content.game_server_id }}"/>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% endfor %}
            </xblock>
        {% endif %}
        <div class="layui-form-item">
          <label for="setting_name" class="layui-form-label">
              <span class="x-red">*</span>配置名称
          </label>
          <div class="layui-input-inline">
              <input type="text" id="setting_name" name="setting_name" required="" lay-verify="required"
              autocomplete="off" value="{{ conf_setting_info.setting_name }}" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label for="server_id" class="layui-form-label">
              <span class="x-red">*</span>server_id
          </label>
          <div class="layui-input-inline">
              <input type="text" id="server_id" name="server_id" required="" lay-verify="required"
              autocomplete="off" value="{{ conf_setting_info.server_id }}"  class="layui-input">
          </div>
        </div>

{#        <div class="layui-form-item">#}
{#          <label for="groupd_id" class="layui-form-label">#}
{#              <span class="x-red">*</span>所属分区#}
{#          </label>#}
{#          <div class="layui-input-inline" id="my_select">#}
{#              <select id="groupd_id" name="groupd_id">#}
{#                    <option value="{{ conf_setting_info.b_gameserver_group_id }}">{{ conf_setting_info.b_gameserver_group }}</option>#}
{#                    {% for gameserver_group in gameserver_group_list %}#}
{#                        <option value="{{ gameserver_group.id }}">{{ gameserver_group.group_name }}</option>#}
{#                    {% endfor %}#}
{#              </select>#}
{#          </div>#}
{#        </div>#}
        <div class="layui-form-item">
          <label for="L_repass" class="layui-form-label">
          </label>
          <button type="submit" class="layui-btn" lay-filter="edit" lay-submit="">
              修改
          </button>
        </div>
    </div>
</form>
{#json编辑框的script#}
<script type="text/javascript">
    if (window.localStorage.getItem('show-version-tip') && window.localStorage.getItem('show-version-tip') === '1') {
    } else {
        // $('.old-version').addClass('old-version-tip');
        // $('.old-version').attr('data-href', $('.old-version').attr('href'));
        // $('.old-version').attr('href', '');
        // $('.tip-mask').show()
    }
    $('.tip-mask').click(function () {
        $(this).remove();
        $('.old-version-tip').removeClass('old-version-tip');
        $('.old-version').attr('href', $('.old-version').attr('data-href'));
    });
    $('.old-version-tip').click(function () {
        $(this).remove();
        $('.old-version').attr('href', $('.old-version').attr('data-href'));
        $('.tip-mask').removeClass('old-version-tip');
        window.localStorage.setItem('show-version-tip', '1')
    });

    $('textarea').numberedtextarea();
    var current_json = '';
    var current_content = '';
    var current_json_str = '';
    var xml_flag = false;
    var zip_flag = false;
    var shown_flag = false;
    var compress_flag = false;
    $('.tip').tooltip();

    function init() {
        xml_flag = false;
        zip_flag = false;
        shown_flag = false;
        compress_flag = false;
        isXml = false;
        renderLine();
        $('.xml').attr('style', 'color:#999;');
        $('.zip').attr('style', 'color:#999;');

    }

    $('#cancelZY').click(function () {
        init();
        var content = $.trim($('#json-src').val());
        var result = '';
        if (content != '') {
            //如果是xml,那么转换为json
            if (content.substr(0, 1) === '<' && content.substr(-1, 1) === '>') {
                try {
                    var json_obj = $.xml2json(content);
                    content = JSON.stringify(json_obj);
                } catch (e) {
                    result = '解析错误：<span style="color: #f1592a;font-weight:bold;">' + e.message + '</span>';
                    current_json_str = result;
                    $('#json-target').html(result);
                    return false;
                }

            }
            try {
                var hasZY = $('#cancelZY').prop('checked');
                if (hasZY) {
                    content = content.replace(/\\/g, '\\\\');
                    content = content.replace(/\\"/g, '\\\\"');
                }

                current_json = jsonlint.parse(content);
                current_json_str = JSON.stringify(current_json);
                //current_json = JSON.parse(content);
                current_content = content;
                result = new JSONFormat(content, 4).toString();
            } catch (e) {
                result = '<span style="color: #f1592a;font-weight:bold;">' + e + '</span>';
                current_json_str = result;
            }

            $('#json-target').html(result);
        } else {
            $('#json-target').html('');
        }
    });

    var isXml = false;
    $('#json-src').keyup(function () {
        init();
        var content = $.trim($(this).val());
        var result = '';
        if (content != '') {
            //如果是xml,那么转换为json
            if (content.substr(0, 1) === '<' && content.substr(-1, 1) === '>') {
                isXml = true;
                try {
                    var json_obj = $.xml2json(content);
                    content = JSON.stringify(json_obj);
                } catch (e) {
                    result = '解析错误：<span style="color: #f1592a;font-weight:bold;">' + e.message + '</span>';
                    current_json_str = result;
                    $('#json-target').html(result);
                    return false;
                }

            }

            try {
                var hasZY = $('#cancelZY').prop('checked');
                if (hasZY) {
                    content = content.replace(/\\/g, '\\\\');
                    content = content.replace(/\\"/g, '\\\\"');
                }

                current_json = jsonlint.parse(content);
                current_json_str = JSON.stringify(current_json);
                //current_json = JSON.parse(content);
                current_content = content;
                result = new JSONFormat(content, 4).toString();
            } catch (e) {
                result = '<span style="color: #f1592a;font-weight:bold;">' + e + '</span>';
                current_json_str = result;
            }

            $('#json-target').html(result);
        } else {
            $('#json-target').html('');
        }

    });
    $('#right-box').keyup(function () {

        var text = $('#json-target').html().replace(/<br\/>/g, "\n").replace(/<br>/g, "\n").replace(/<[^>]+>/g, "").replace(/&nbsp;/ig, " ").replace(/Object{...}/ig, "").replace(/Array\[[0-9]+\]/ig, "");
        if (!xml_flag) {
            $('#json-src').val(text);
            current_content = text;
        }

    });
    $('.xml').click(function () {
        if (xml_flag) {
            $('#json-src').keyup();
        } else {
            var result = $.json2xml(current_content);
            $('#json-target').html('<textarea style="width:100%;position:absolute;height: 80vh;min-height:480px;border:0;resize:none;">' + result + '</textarea>');
            xml_flag = true;
            $(this).attr('style', 'color:#15b374;');
        }

    });
    $('.shown').click(function () {
        if (!shown_flag) {
            renderLine();
            $('#line-num').show();
            console.log($('#line-num'))
            $('.numberedtextarea-line-numbers').show();
            shown_flag = true;
            $(this).attr('style', 'color:#15b374;');
        } else {
            $('#line-num').hide();
            $('.numberedtextarea-line-numbers').hide();
            shown_flag = false;
            $(this).attr('style', 'color:#999;');
        }
    });

    function renderLine() {
        var line_num = $('#json-target').height() / 20;
        $('#line-num').html("");
        var line_num_html = "";
        for (var i = 1; i < line_num + 1; i++) {
            line_num_html += "<div>" + i + "<div>";
        }
        $('#line-num').html(line_num_html);
    }

    $('.zip').click(function () {
        if (zip_flag) {
            $('#json-src').keyup();
        } else {
            //$('#json-target').html(current_json_str.replace(/</g,"&lt;").replace(/>/g,"&gt;"));
            $('#json-target').html("<xmp>" + current_json_str + "</xmp>");
            zip_flag = true;
            $(this).attr('style', 'color:#15b374;');
        }

    });
    $('.compress').click(function () {
        if (!compress_flag) {
            $(this).attr('style', 'color:#15b374;');
            //$(this).attr('title','取消折叠').tooltip('fixTitle').tooltip('show');
            $($(".fa-minus-square-o").toArray().reverse()).click();
            compress_flag = true;
        } else {
            while ($(".fa-plus-square-o").length > 0) {
                $(".fa-plus-square-o").click();
            }
            compress_flag = false;
            $(this).attr('style', 'color:#555;');
            $(this).attr('title', '折叠').tooltip('fixTitle').tooltip('show');
        }
    });
    $('.clear').click(function () {
        $('#json-src').val('');
        $('#json-target').html('');
    });
    $('.share').click(function () {
        $('#hidden-message-box').hide();
        try {
            var jqxhr = $.post("/shares/", {"content": current_json_str}, function (data) {
                var k = data;
            })
                .success(function (data) {
                    // window.location.href = "share.html?k=" + data;
                })
                .error(function (data) {
                    $('#hidden-message-box').hide();
                    if (data.status <= 400 && data.status > 200) {
                        $('#hidden-message').html(data.responseText);
                    } else if (data.status > 400) {
                        $('#hidden-message').html("服务器升级中...此功能暂不可用.");
                    }
                    $('#hidden-message-box').show();
                }).done(function (data) {
                    $('#hidden-message-box').hide();
                    if (data.responseText != undefined) {
                        $('#hidden-message').html(data.responseText);
                    } else {
                        $('#hidden-message').html("服务器升级中...此功能暂不可用.");
                    }
                    $('#hidden-message-box').show();
                }).complete(function (data) {
                    $('#hidden-message-box').show();
                });
        } catch (e) {
            $('#hidden-message-box').show();
        } finally {
            setTimeout(function () {
                $('#hidden-message-box').hide();
            }, 3000);
        }


    });
    $('.fullScreen').click(function () {
        $('#dragEle').css('left', '');
        $('main .col-md-7').css('width', '');
        $('main .col-md-5').css('width', '');
        $('.editor-con').toggleClass('editor-full-screen');
        $('body').toggleClass('overflow-hidden');
        $('.fullScreen .fa').toggleClass('fa-minus fa-arrows-alt');
        if ($(this).attr('data-original-title') === '全屏') {
            $(this).attr('data-original-title', '最小化')
        } else {
            $(this).attr('data-original-title', '全屏')
        }
    });
    (function ($) {
        $.fn.innerText = function (msg) {
            if (msg) {
                if (document.body.innerText) {
                    for (var i in this) {
                        this[i].innerText = msg;
                    }
                } else {
                    for (var i in this) {
                        this[i].innerHTML.replace(/&amp;lt;br&amp;gt;/gi, "n").replace(/(&amp;lt;([^&amp;gt;]+)&amp;gt;)/gi, "");
                    }
                }
                return this;
            } else {
                if (document.body.innerText) {
                    return this[0].innerText;
                } else {
                    return this[0].innerHTML.replace(/&amp;lt;br&amp;gt;/gi, "n").replace(/(&amp;lt;([^&amp;gt;]+)&amp;gt;)/gi, "");
                }
            }
        };
    })(jQuery);
    $('.save').click(function () {
        // var content = JSON.stringify(current_json);
        // $('#txt-content').val(content);
        //var text = "hell world";
        var html = $('#json-target').html().replace(/\n/g, '<br/>').replace(/\n/g, '<br>');
        var text = $('#json-target').innerText().replace('　　', '    ');
        var blob = new Blob([text], {type: "application/json;charset=utf-8"});
        var timestamp = new Date().getTime();
        saveAs(blob, "format." + timestamp + ".json");
    });
    var clipboard = new Clipboard('.copy');
    $('#json-src').keyup();

    //拖拽
    // var totalWidth = $(window).outerWidth() >= 1200 ? 1200 : $(window).outerWidth();
    var totalWidth = $(window).outerWidth();
    // var gapWidth = $(window).outerWidth() > 1200 ? ($(window).outerWidth() - 1200) / 2 : 0;
    var gapWidth = 0;
    var forbidenWidth = totalWidth - 400;
    $('#dragEle').myDrag({
        parent: 'parent', //定义拖动不能超出的外框,拖动范围
        randomPosition: false, //初始化随机位置
        direction: 'x', //方向
        handler: false, //把手
        dragStart: function (x, y) {
            totalWidth = $(window).outerWidth();
            gapWidth = 0;
            forbidenWidth = totalWidth - 400;
        }, //拖动开始 x,y为当前坐标
        dragEnd: function (x, y) {
            totalWidth = $(window).outerWidth();
            gapWidth = 0;
            forbidenWidth = totalWidth - 400;

            if (x > forbidenWidth) {
                $('#dragEle').offset({top: 0, left: forbidenWidth - 5 + gapWidth});
                $('main .col-md-5').width(forbidenWidth);
                $('main .col-md-7').width(totalWidth - forbidenWidth);
            } else if (x < 200) {
                $('#dragEle').offset({top: 0, left: 195 + gapWidth});
                $('main .col-md-5').width(200);
                $('main .col-md-7').width(totalWidth - 200);
            } else {
                $('main .col-md-5').width(x);
                $('main .col-md-7').width(totalWidth - x - 1);
            }
        }, //拖动停止 x,y为当前坐标
        dragMove: function (x, y) {
            if (x > forbidenWidth || x < 200) {

            } else {
                $('main .col-md-5').width(x);
                $('main .col-md-7').width(totalWidth - x - 1);
            }
        } //拖动进行中 x,y为当前坐标
    });
    $(window).resize(function () {
        $('#dragEle').css('left', '');
        $('main .col-md-7').css('width', '');
        $('main .col-md-5').css('width', '');
    });

    //搜索
    $('select.chosen-select').on('change', function () {

        window.location.href = $(this).val()
    });

    $('body').on('click', '#goTop', function () {
        $('body,html').animate({
                scrollTop: 0
            },
            500);
        return false;
    });

    $('body').on('mouseenter','.ind-footer-nav-item',function () {
        $('.ind-footer-nav-item').removeClass('active')
        $(this).addClass('active');
        var index = $(this).attr('data-index');
        $('.ind-footer-nav-show').each(function (i, v) {
            if ($(this).attr('data-index') == index){
                $(this).addClass('active')
            }else {
                $(this).removeClass('active');
            }
        })
    })


    $('body').on('mouseenter','.nav-show-one',function () {
        $('.nav-show-one').removeClass('active');
        $(this).addClass('active');
        var itext = $(this).text();
        var ione = $(this).attr('data-chose');
        $(this).closest('.ind-footer-nav-show').find('.nav-show-one-sm-s-show').each(function (i, v) {
            $(v).hide();
            var index =  $(v).attr('data-target');
            if (ione == index){
                $(v).find('.nav-show-one-sm-show-t').text(itext)
                $(v).show();
            }
        })
    });


</script>
{#son编辑框的script#}
<script type="text/javascript" src="/static/super_cmdb/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/super_cmdb/js/jquery.form.min.js"></script>
<script type="text/javascript" src="/static/super_cmdb/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/super_cmdb/js/xadmin.js"></script>
<script type="text/javascript" src="/static/super_cmdb/js/jquery.cookie.js"></script>

<script>
    $(function () {
        $.ajaxSetup({
            beforeSend:function (xhr,settings) {
                xhr.setRequestHeader("X-CSRFtoken",$.cookie("csrftoken"));
            }
        })
    });

    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
          elem: '#execution_time', //指定元素
          type: "datetime"
        });
    });

    // $(function ())是文档document加载完自动调用的函数
    $(function () {
        /*
         获取form元素，调用其ajaxForm(...)方法
         内部的function(data)的data就是后台返回的数据
        */
        $("#conf_setting_edit").ajaxForm(function (data) {
            if (data.code == 0){
                layer.alert(data.msg, {icon: 6});
            } else {
                layer.alert(data.msg, {icon: 7});
            }
        });
    });

  {#  layui.use(['form','layer'], function(){#}
  {#    $ = layui.jquery;#}
  {#  var form = layui.form#}
  {#  ,layer = layui.layer;#}
  {##}
  {#  //监听提交#}
  {#  form.on('submit(edit)', function(data){#}
  {#    console.log(data);#}
  {#    //发异步，把数据提交给php#}
  {#      $.ajax({#}
  {#          url: "/super_cmdb/conf_setting_edit-{{ conf_setting_info.id }}/",#}
  {#          type: "POST",#}
  {#          //data: $('#layui-form').serialize(),#}
  {#          data: {#}
  {#              "setting_name":$("#setting_name").val(),#}
  {#              "server_id":$("#server_id").val(),#}
  {#              "setting_content":$("#json-src").val(),#}
  {#              "groupd_id":$("#groupd_id").val(),#}
  {#              "server_id_list":$("#server_id_list").val(),#}
  {#              "game_server_id_list":$("#game_server_id_list").val()#}
  {#              },#}
  {#          success: function (data) {#}
  {#              if (data.code == 0) {#}
  {#                  layer.alert(data.msg, {icon: 6});#}
  {#              } else {#}
  {#                  layer.alert(data.msg, {icon: 7});#}
  {#              }#}
  {#          }#}
  {#      });#}
  {#      return false;#}
  {#  });#}
  //{#});#}

</script>
</body>
</html>
